<template>
	<view>
		<uni-popup ref="rulModel" type="bottom" zindex>
			<view class="modelcon">
				<view class="mo_tops">
					<view class="tops_box">
						<view class="top_values">{{props.costNum}}</view>
						<view class="top_text">消费次数</view>
					</view>
					<view class="tops_box">
						<view class="top_values"><text class="values_units">¥</text>{{props.costPrice}}</view>
						<view class="top_text">消费金额</view>
					</view>
				</view>
				<view class="model_changesTime">
					<view class="times_item point" v-for="(item,index) in timesList" :key="index" @click="changeTimes(item)">
						<view :class="item.values==pickTimes?'acts':''">{{item.labels}}</view>
						<view class="invs" v-if="index!=timesList.length-1"></view>
					</view>
				</view>
				<view class="model_scrolls">
					<scroll-view scroll-y scroll-with-animation style="width:100%;height:100%;" refresher-enabled="true"
							:refresher-triggered="refLoad" @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower">
							<empty positions="absolute" :empty="loadedList&&turnoverList.length<=0" :zIndexs="100"
								:imgUrl="'https://cdn-static.yekjx.com/'+'food/empty/images/empty_ico04.png'" content="暂无历史消费"></empty>
						 <view class="scorlls_item" v-for="(item,index) in turnoverList" :key="index">
						 	 <view class="item_tops">
								 <text class="item_times">{{item.times}}</text>
								 <text class="item_cost" v-if="item.trans_type=='152'">-¥{{item.costMo}}</text>
								 <text class="item_costS" v-else>+¥{{item.costMo}}</text>
							 </view>
						 	 <view class="item_contens">
						 	 	 {{item.eatFoods}}
						 	 </view>	
						 </view>
						 <view class="flex justify-center">
						 	 <uni-load-more :status="loadStatus" iconType="circle"></uni-load-more>
						 </view>
					</scroll-view>
				</view>
			</view>

		</uni-popup>
		<loading></loading>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { getFlows } from '@/api/vmeitime-http/index.js'
	import { showLoading, hideLoading, mnavTo } from '@/utils/helper';
	import mapi from '@/utils/mapi';
	const emit = defineEmits(["sendOrder"])
	const rulModel = ref()
	const refLoad = ref(false)
	const loadedList = ref(false)//是否加载
	const loadStatus = ref('noMore')
	const pageInfo = ref({
		curPage: 1,
		pageSize: 10,
		backCupPage: 2
	})
	const props = defineProps({
		costNum:{
			type:Number,
			default:0
		},	
		costPrice:{
			type:Number,
			default:0
		},
		billsId:{
			type:String,
			default:''
		}
	})
	const timesList = ref([
		{
			labels: "30天",
			values: "0"
		}, {
			labels: "一年内",
			values: "1"
		}
	])
	const pickTimes = ref('0')
	const turnoverList=ref([])
	
	const open = () => {
		rulModel.value.open()
		loadList('refresh')
	}
	const close = () => {
		rulModel.value.close()
	}
	const changeTimes = (item : any) => {
		pickTimes.value = item.values
		loadList('refresh')
	}
	const refresherrefresh = () => {
		refLoad.value = true
		setTimeout(() => {
			refLoad.value = false
		}, 500)
		loadList('refresh')
	}
	const scrolltolower = () => {
		loadList('add')
	}
	const loadList = async (source : any) => {
		loadStatus.value = 'loading'
		if (source == 'refresh') {
			pageInfo.value.curPage = 1
			pageInfo.value.backCupPage = 2
		}
		if (pageInfo.value.curPage > pageInfo.value.backCupPage && source != 'refresh') {
			console.log("没有更多啦")
			loadStatus.value = 'noMore'
			return
		}
		showLoading()
		try {
			let res = await getFlows({ bill_id: props.billsId, pageSize: pageInfo.value.pageSize, curPage: pageInfo.value.curPage })
			loadedList.value = true
			hideLoading()
			if (!res.result) {
				mapi.msg(res.shortMessage ||'网络繁忙，请稍后再试')
				return
			}
			if (pageInfo.value.curPage == res.page.totalPage) {
				loadStatus.value = 'noMore'
			} else {
				loadStatus.value = 'more'
			}
			pageInfo.value.curPage += 1
			pageInfo.value.backCupPage = res.page.totalPage || 0
	
			if (source == 'refresh') {
				turnoverList.value = []
			}
			let nres=res.object.details || []
			// trans_type:152-支出,151-收入
			nres.forEach((item : any, index : any) => {
				const {
					create_date,
					total_money,
					remark,
					trans_type,
				} = item;
				turnoverList.value.push({
					times: `${create_date.slice(0, 4)}-${create_date.slice(4, 6)}-${create_date.slice(6, 8)} ${create_date.slice(8, 10)}:${create_date.slice(10, 12)}:${create_date.slice(12, 14)}`,
					costMo:total_money,
					eatFoods:remark,
					trans_type
				});
			});
		} catch (e) {
			//TODO handle the exception
			loadedList.value = true
			loadStatus.value = 'noMore'
			hideLoading()
		}
	}
	defineExpose({ open, close })
</script>

<style lang="scss" scoped>
	.modelcon {
		border-radius: 20rpx;
		background-color: #FAFAFA;
		padding: 30rpx;
		position: relative;

		.mo_tops {
			width: 100%;
			height: 192rpx;
			border-radius: 20rpx;
			background: #FFF;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
			display: flex;
			justify-content: center;
			align-items: center;

			.tops_box {
				width: 50%;
				height: 100%;
				padding: 45rpx 0 0rpx 0;

				.top_values {
					color: #53A87F;
					font-size: 48rpx;
					font-weight: 700;
					text-align: center;

					.values_units {
						font-size: 20rpx;
					}
				}

				.top_text {
					text-align: center;
					margin-top: 10rpx;
				}
			}
		}

		.model_changesTime {
			width: 100%;
			height: 60rpx;
			border-bottom: 2rpx solid #F3F3F3;
			margin-top: 20rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 25rpx 0 25rpx;

			.times_item {
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				;
				align-items: center;
				color: #999;

				.acts {
					color: #333;
					font-weight: 700;
				}

				.invs {
					width: 2rpx;
					height: 20rpx;
					background-color: #999;
					margin: 5rpx 15rpx 0 20rpx;
					border-radius: 10rpx;
				}

				&:nth-child(n+2) {
					margin-left: 10rpx;
				}
			}
		}

		.model_scrolls {
			width: 100%;
			height: 600rpx;
			margin-top: 20rpx;
			position: relative;
			.scorlls_item{
				width:100%;
				border-bottom: 2rpx solid #F3F3F3;
				padding-bottom: 20rpx;
				&:nth-child(n+2){
					margin-top: 10rpx;
				}
				&:last-child{
					border:none;
				}
				.item_tops{
					height:50rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 20rpx 0 24rpx;
					.item_times{
						color: #666;
						font-size: 32rpx;
						font-weight: 400;
						letter-spacing: 0.32px;
					}
					.item_cost{
						color: #FF6D6D;
						font-size: 32rpx;
						font-weight: 400;
						letter-spacing: 0.32px;
					}
					.item_costS{
						color: #53A87F;
						font-size: 32rpx;
						font-weight: 400;
						letter-spacing: 0.32px;
					}
				}
				.item_contens{
					border-radius: 20rpx;
					background: #F8F8FA;
					padding:10rpx 30rpx 10rpx 40rpx;
					margin-top: 20rpx;
					text-align: left;
				}
			}
		}
	}
</style>